// NumberPad 组件样式 - 4x4 布局
// 适配 Taro 多端框架，Taro 会自动将 px 转换为各端适配单位

.number-pad {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px;

  // 主网格容器
  &__grid {
    display: flex;
    width: 100%;
  }

  // 左侧 3x4 数字区域
  &__left {
    width: 75%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-right: 8px;
    box-sizing: border-box;
  }

  // 每一行按钮
  &__row {
    display: flex;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  // 数字按钮样式
  &__button {
    flex: 1;
    min-width: 0;
    height: 56px;
    margin-right: 8px;
    font-size: 28px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;

    &:last-child {
      margin-right: 0;
    }

    &:active {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }

  // 右侧操作区域
  &__right {
    width: 25%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  // 删除按钮
  &__delete-button {
    height: 56px;
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }

  // 确认按钮（占 3 格高度）
  &__ok-button {
    flex: 1;
    font-size: 28px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }
  }
}

// 响应式适配(小屏幕设备)
@media screen and (max-width: 375px) {
  .number-pad {
    &__button,
    &__delete-button {
      height: 48px;
      font-size: 24px;
    }

    &__ok-button {
      font-size: 24px;
    }
  }
}

// 响应式适配(大屏幕设备)
@media screen and (min-width: 768px) {
  .number-pad {
    max-width: 500px;
    margin: 0 auto;

    &__button,
    &__delete-button {
      height: 64px;
      font-size: 32px;
    }

    &__ok-button {
      font-size: 32px;
    }
  }
}